<template>
	<view>
		<view class="header"></view>
		<view class="content">

			<view class="projectCol1">
				<view class="label">商家服务</view>
				<uni-grid :column="4" :showBorder="border" @change="gridLink()" v-if="column ==4">
					<uni-grid-item :index="0">
						<view class="gridcol">
							<image src="../../static/icon/user/quanxian.png" mode=""></image>
						</view>
						<view class="grid-text">权限管理</view>
					</uni-grid-item>
					<uni-grid-item :index="1">
						<view class="gridcol">
							<image src="../../static/icon/user/renwu.png" mode=""></image>
						</view>
						<view class="grid-text">任务发布</view>
					</uni-grid-item>
					<uni-grid-item :index="2">
						<view class="gridcol">
							<image src="../../static/icon/user/shenhe.png" mode=""></image>
						</view>
						<view class="grid-text">任务审核</view>
					</uni-grid-item>
					<uni-grid-item :index="3">
						<view class="gridcol">
							<image src="../../static/icon/user/saomiao.png" mode=""></image>
						</view>
						<view class="grid-text">扫码核验</view>
					</uni-grid-item>
				</uni-grid>
				<uni-grid :column="3" :showBorder="border" @change="gridLink()" v-if="column ==3">
					<!-- <uni-grid-item :index="0">
						<view class="gridcol"><image src="../../static/icon/user/quanxian.png" mode=""></image></view>
						<view class="grid-text">权限管理</view>
					 </uni-grid-item> -->
					<uni-grid-item :index="1">
						<view class="gridcol">
							<image src="../../static/icon/user/renwu.png" mode=""></image>
						</view>
						<view class="grid-text">任务发布</view>
					</uni-grid-item>
					<uni-grid-item :index="2">
						<view class="gridcol">
							<image src="../../static/icon/user/shenhe.png" mode=""></image>
						</view>
						<view class="grid-text">任务审核</view>
					</uni-grid-item>
					<uni-grid-item :index="3">
						<view class="gridcol">
							<image src="../../static/icon/user/saomiao.png" mode=""></image>
						</view>
						<view class="grid-text">扫码核验</view>
					</uni-grid-item>
				</uni-grid>
				<uni-grid :column="3" :showBorder="border" @change="gridLink()" v-if="column ==1">
					<uni-grid-item :index="2" v-if="datas.storeExamine == '1'">
						<view class="gridcol">
							<image src="../../static/icon/user/shenhe.png" mode=""></image>
						</view>
						<view class="grid-text">任务审核</view>
					</uni-grid-item>
					<uni-grid-item :index="3">
						<view class="gridcol">
							<image src="../../static/icon/user/saomiao.png" mode=""></image>
						</view>
						<view class="grid-text">扫码核验</view>
					</uni-grid-item>
				</uni-grid>
			</view>
			<view class="storeBalance">
				<view class="lab">推广余额</view>
				<view class="balance">￥{{storeBalance.extensionPrice}}</view>
				<view class="but"><button type="warn" size="mini" @click="goPage()" v-if="column !=1">立即充值</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				column: '',
				datas: {},
				storeBalance: '',
				changeData: []
			}
		},
		onLoad(data) {

			this.usersList();

		},
		methods: {

			goPage() {
				uni.navigateTo({
					url: "/pages/store/recharge"
				})
			},
			gridLink(id) {
				if (id.detail.index == 0) {
					uni.navigateTo({
						url: "/pages/store/jurisdiction?id=" + this.datas.projectPid
					})
				} else if (id.detail.index == 2) {
					uni.navigateTo({
						url: "/pages/store/taskexamine?id=" + this.datas.projectPid
					})
				} else if (id.detail.index == 1) {
					uni.navigateTo({
						url: "/pages/store/publishTask?id=" + this.datas.projectPid
					})
				} else if (id.detail.index == 3) {
					let that = this;
					// 只允许通过相机扫码
					uni.scanCode({
						onlyFromCamera: true,
						success: function(res) {
							that.result2 = res.result;
							console.log('条码类型：' + res.scanType);
							//显示用户哗啦啦信息
							if (res.result) {
								uni.navigateTo({
									url: "/pages/store/usercode?id=" + res.result
								})
							}
							console.log('条码内容：' + res.result);
						}
					});
				}

			},
			async usersList() {
				//查询用户所属项目 以及权限类别
				const users = await this.GQL({
					"operationName": "allSlUsers",
					"query": "query allSlUsers($filter: SlUserFilter) { allSlUsers(filter:$filter) { nodes { storeBalance projectPid uid isStore jurisdiction storeExamine} } }",
					"variables": {
						"filter": {
							"uid": {
								"equalTo": uni.getStorageSync('userData').uid
							}
						}
					}
				})
				//console.log('user',users)
				if (users.data.allSlUsers.nodes != '') {
					if (users.data.allSlUsers.nodes[0].jurisdiction == 1) {
						this.column = '4';
					} else if (users.data.allSlUsers.nodes[0].jurisdiction == 2) {
						this.column = '3';
					} else {
						this.column = '1';
					}
					this.datas = users.data.allSlUsers.nodes[0]
					//查询项目剩余 推广金额
					const project = await this.GQL({
						"operationName": "allSlProjects",
						"query": "query allSlProjects($filter: SlProjectFilter) { allSlProjects(filter:$filter) { nodes { extensionPrice title } } }",
						"variables": {
							"filter": {
								"pid": {
									"equalTo": this.datas.projectPid
								}
							}
						}
					})
					// console.log('1-------',project.data.allSlProjects.nodes[0])
					if (project.data.allSlProjects.nodes != '') {
						this.storeBalance = project.data.allSlProjects.nodes[0]
						// console.log('1-----',project);
					} else {
						uni.showToast({
							title: '获取项目失败！',
							icon: 'error',
							duration: 3000
						});
					}
					//获取商家充值金额等 
					const storeChange = await this.GQL({
						"operationName": "allSlSystemConfigs",
						"query": "query allSlSystemConfigs($filter: SlSystemConfigFilter) { allSlSystemConfigs(filter: $filter) { nodes { id storeRecharge  } } }",
						"variables": {
							"filter": {
								"menuName": {
									"equalTo": "site_name"
								}
							}
						}
					})
					if (storeChange.data.allSlSystemConfigs.nodes != '') {
						this.changeData = JSON.parse(storeChange.data.allSlSystemConfigs.nodes[0].storeRecharge)
					}
					// console.log('1-------',this.changeData)




				}
			},


		}
	}
</script>

<style lang="scss">
	.u-page {
		// background-color: #FBFCFE;
	}

	.header {
		width: 100%;
		height: 150px;
		/* color: #FFFFFF; */
		background: linear-gradient(#C7171E, #f0f2f5);
		/* 标准的语法 */

	}

	.content {
		position: relative;
		top: -160px;

		border-radius: 5px;
		margin: 15px;

		.projectCol1 {
			box-shadow: 1px -2px 10px 6px rgba(0, 0, 0, 0.1);
			margin-top: 30px;
			border-radius: 10px;
			background-color: #FFFFFF;
			height: 150px;
			display: block;
			justify-content: center;

			.label {
				font-size: 16px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #161E3E;
				line-height: 16px;
				margin: 10px;
				padding-top: 20px;
			}

			.gridcol {
				text-align: center;
				margin-top: 10px;
				margin-left: 3px;
			}

			.grid-text {

				text-align: center;
				font-size: 12px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #161E3E;
				line-height: 16px;
			}

			image {
				width: 68px;
				height: 68px;
			}

			.title {
				padding-top: 1px;
			}

			.jiange {
				margin: 20px 0px;
				width: 100%;

				.remen {
					font-size: 16px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #161E3E;
					line-height: 16px;
				}

				.more {
					text-align: right;
					font-size: 12px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #9BA7C1;
					line-height: 16px;

					image {
						width: 10px;
						height: 10px;
					}
				}
			}

		}

		.storeBalance {
			box-shadow: 1px -2px 10px 6px rgba(0, 0, 0, 0.1);
			margin-top: 30px;
			border-radius: 10px;
			background-color: #FFFFFF;
			height: 150px;
			text-align: center;

			.lab {
				padding: 20px 0px;
				font-size: 18px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #767B8D;
				line-height: 16px;
			}

			.balance {
				padding: 10px 0px 20px 0px;
				font-size: 24px;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #C7171E;
				line-height: 16px;
			}
		}

		.popup-content {
			height: 200px;
			background-color: #FFFFFF;
		}

	}
	.but{
		button{
			box-shadow: 1px -2px 10px 6px rgba(0, 0, 0, 0.1);
			padding: 2px 50px;
		}
	}
</style>
